<template>
  <div id="app1" style="display:flex">  
  <div class="card">
    <h1 class="tt texth1">Login</h1>
    <input class="userName loginInput" type="text" placeholder="用户名" v-model="username">
    <input class="passWord loginInput" type="password" placeholder="密码" v-model="password" @keydown.enter="submit">
    <input type="button" class="btn tt loginInput" value="登 录" @click="submit">
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      roles: {'root': 'root', 'test': '123'},
      username: '',
      password: ''
    }
  },
  computed: mapState(['loginStatus']),
  methods: {
    submit() {
      // console.log(this.username)
      // console.log(this.password)
      // console.log(this.roles[this.username])
      // console.log(this.roles[this.username]==this.password)
      if (this.roles[this.username] === this.password) {
        /* alert('登录成功,' + this.username) */
        this.$store.loginStatus = true
        this.$router.push('/message')
        console.log(this.$store.loginStatus + '1234')
      } else alert('账号密码错误')
    },
    created() {
      console.log(this.$store.loginStatus + '1234')
    }
  }
}
</script>
<style>
.userName{
  margin-bottom: 10px;
}
body{
  margin: 0;
  padding: 0;
  border: 0;
}
#app1{
  margin: 0;
  padding: 0;
  border: 0;
  background:url("../static/images/bgimg.jpg");
  -moz-background-size:100% 100%; 
  background-size:100% 100%;
  height:100vh;
  width: 100vw;

}
.card{
  margin: auto auto;
  padding: 0;
  width:80vw;
  max-width: 400px;
  height:50vh;
  background-color:rgba(255,255,255,0.10);
  border-radius:50px;
  /*阴影*/
  box-shadow:20px 20px 50px rgba(0,0,0,0.8);
  /*溢出隐藏*/
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.5);
  border-left:1px solid rgba(255, 255, 255, 0.5);
  /*模糊背景*/
  backdrop-filter: blur(10px);
  text-align: center;
}
*{
  outline: none;
  user-select: none;
}
.texth1{
  margin: 3%;
  font-weight: 30vw;
  font-size: 10vh;
}
.tt{
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
  opacity: 0.9;
}

.loginInput{
  border: none;
  width: 80%;
  font-size: 22px;
  padding: 1vh;
  margin-bottom: 2vh;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(3px);
  border-left: 2px solid rgba(255, 255, 255, .3);
  border-top: 2px solid rgba(255, 255, 255, .3);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

  text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  font-size: 3vh;
  font-family: "Berlin Sans FB";
  color: white;
}
::placeholder{
  color: white;
  opacity: 0.8;
}

.btn{
  width: 30vw;
  max-width: 200px;
  font-size: 5vh;
  font-weight: bold;
  margin-top: 1vh;
  cursor: pointer;
}

input:focus{
  border: none;
  background-color: rgba(255, 255, 255, .1);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  border-right: 2px solid rgba(255, 255, 255, .3);
  border-bottom: 2px solid rgba(255, 255, 255, .3);
  box-shadow:inset 2px 2px 2px rgba(0, 0, 0, .2);
}
</style>
